<template>
  <div class="table-box">
    <ProTable
      ref="proTableRef"
      title="岗位信息表"
      :indent="20"
      :columns="columns"
      :search-columns="searchColumns"
      :request-api="getTableList"
      row-key="postId"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button type="primary"
          v-auth="'sys:post:add'"
          :icon="CirclePlus"
          @click="openAddEdit('新增岗位信息表')"
        >
          新增
        </el-button>
        <el-button
          v-auth="'sys:post:remove'"
          type="danger"
          :icon="Delete"
          plain
          :disabled="!scope.isSelected"
          @click="batchDelete(scope.selectedListIds)"
        >
          批量删除
        </el-button>
      </template>
      <template #operation="{ row }">
        <el-button
          v-auth="'sys:post:update'"
          type="primary"
          link
          :icon="EditPen"
          @click="openAddEdit('编辑岗位信息表', row, false)"
        >
          编辑
        </el-button>
        <el-button
            v-auth="'sys:post:remove'"
          type="primary"
          link
          :icon="Delete"
          @click="deleteInfo(row)"
        >
          删除
        </el-button>
      </template>
    </ProTable>
    <SysPostForm ref="sysPostRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  CirclePlus,
  Delete,
  EditPen,
} from '@element-plus/icons-vue'
import ProTable from '@/components/ProTable/index.vue'
import {
  addSysPostApi,
  removeSysPostApi,
  updateSysPostApi,
  getSysPostListApi,
  getSysPostDetailApi,
} from '@/api/modules/system/sysPost';
import { useHandleData } from '@/hooks/useHandleData';
import SysPostForm from '@/views/system/sysPost/components/SysPostForm.vue';
import { useOptionsStore } from '@/stores/modules/options';
import type { ColumnProps, ProTableInstance, SearchProps } from '@/components/ProTable/interface';
import type { ISysPost } from '@/api/interface/system/sysPost';
defineOptions({
  name: 'SysPostView'
})
const optionsStore = useOptionsStore();
const proTableRef = ref<ProTableInstance>();
// 表格配置项
const columns: ColumnProps<ISysPost.Row>[] = [
  { type: 'selection', width: 80 },
  { prop: 'postCode', label: '岗位编码' },
  { prop: 'postName', label: '岗位名称' },
  { prop: 'sort', label: '显示顺序' },
  { prop: 'isDisable', label: '状态' },
  { prop: 'remark', label: '备注' },
  { prop: 'operation', label: '操作', width: 250, fixed: 'right' }
]
// 搜索条件项
const searchColumns: SearchProps[] = [
  { prop: 'postCode', label: '岗位编码', el: 'input' },
  { prop: 'postName', label: '岗位名称', el: 'input' },
]
// 获取table列表
const getTableList = (params: ISysPost.Query) => {
  let newParams = formatParams(params);
  return getSysPostListApi(newParams);
};
const formatParams = (params: ISysPost.Query) =>{
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.createTime && (newParams.createTimeStart = newParams.createTime[0]);
  newParams.createTime && (newParams.createTimeEnd = newParams.createTime[1]);
  delete newParams.createTime;
  newParams.updateTime && (newParams.updateTimeStart = newParams.updateTime[0]);
  newParams.updateTime && (newParams.updateTimeEnd = newParams.updateTime[1]);
  delete newParams.updateTime;
  return newParams;
}
// 打开 drawer(新增、查看、编辑)
const sysPostRef = ref<InstanceType<typeof SysPostForm>>()
const openAddEdit = async(title: string, row: any = {}, isAdd = true) => {
  if (!row.sort) {
    row.sort = 1
  }
  if (!isAdd) {
    const record = await getSysPostDetailApi({ id: row?.postId })
    row = record?.data
  }
  const params = {
    title,
    row: { ...row },
    api: isAdd ? addSysPostApi : updateSysPostApi,
    getTableList: proTableRef.value?.getTableList
  }
  sysPostRef.value?.acceptParams(params)
}
// 删除信息
const deleteInfo = async (params: ISysPost.Row) => {
  await useHandleData(
    removeSysPostApi,
    { ids: [params.postId] },
    `删除【${params.postId}】岗位信息表`
  )
  proTableRef.value?.getTableList()
}
// 批量删除信息
const batchDelete = async (ids: string[]) => {
  await useHandleData(removeSysPostApi, { ids }, '删除所选岗位信息表')
  proTableRef.value?.clearSelection()
  proTableRef.value?.getTableList()
}
</script>


